<!-- 用料监控 -->
<template>
    <div class="app-container">
      <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="80px">
        <el-form-item label="拌合站" prop="identifier">
          <el-select v-model="queryParams.identifier" clearable placeholder="请选择">
            <el-option v-for="item in stationList" :key="item.name" :label="item.name" :value="item.identifier"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="时间范围" prop="id">
          <deatetime ref="deatetime" v-model="queryParams.time"> </deatetime>
        </el-form-item>
  
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery" v-hasPermi="['zhgd:allCapacity:query']">搜索</el-button>
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>

      <el-table border v-loading="loading" :data="listsss" max-height="265">
        <el-table-column type="selection" width="55" align="center" />
        <el-table-column label="序号" align="center" width="60" type="index"/>
        <el-table-column label="生产日期" align="center" min-width="120" show-overflow-tooltip prop="A"/>
        <el-table-column label="拌合机名称" align="center" min-width="120" show-overflow-tooltip prop="B"/>
        <el-table-column label="生产总重量" align="center" min-width="120" show-overflow-tooltip prop="C"/>
        <el-table-column label="生产盘数" align="center" min-width="120" show-overflow-tooltip prop="D"/>
      </el-table>

      <!-- Echarts -->
      <div id="Chart1"></div>
    </div>
  </template>
    
  <script>
  import { productListData, deptListData } from "@/api/zhgd/hntManage";
  import { productGetList } from "@/api/zhgd/allCapacity";
  import * as echarts from "echarts";
  require("echarts/theme/macarons"); // echarts theme
  import deatetime from "@/components/Datetime"; // 生产日期
  
  
  export default {
    name: "HntManage",
    data() {
      return {
        listsss:[
          {A:'111', B:'111', C:'111', D:'111'},
          {A:'222', B:'222', C:'222', D:'222'},
          {A:'333', B:'333', C:'333', D:'333'},
        ],
        Chart1: null,
        // 遮罩层
        loading: false,
        // 显示搜索条件
        showSearch: true,
        // 总条数
        total: 0,
        // 总生产盘数
        allPiecnt: 0,
        // 混凝土拌合站数据表格数据
        productList: [],
        // 拌合站搜索框数据
        stationList: [],
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10,
        },
      };
    },
    components: {
      deatetime,
    },
    created() {
      this.getList();
      this.getProjectList();
    },
    beforeDestroy() {
      if (!this.chart) {
        return
      }
      this.chart.dispose()
      this.chart = null
    },
    methods: {
      /** 查询拌合站搜索框数据 */
      getProjectList() {
        deptListData(this.queryParams).then((response) => {
          this.stationList = response;
        });
      },
      /** 搜索按钮操作 */
      handleQuery() {
        this.queryParams = this.getSearchParams();
        this.queryParams.pageNum = 1;
        this.getList();
      },
      getSearchParams() {
        const params = {};
        for (const key in this.queryParams) {
          if (key === "time") {
            const time = this.queryParams[key];
            if (time && time.length === 2) {
              params.startTime = time[0];
              params.endTime = time[1];
            }
          } else {
            params[key] = this.queryParams[key];
          }
        }
        return params;
      },
      /** 重置按钮操作 */
      resetQuery() {
        this.queryParams.id = "";
        this.$refs.deatetime.startTime = null;
        this.$refs.deatetime.endTime = null;
        this.queryParams.time = [];
        this.queryParams.startTime = "";
        this.queryParams.endTime = "";
        this.resetForm("queryForm");
        this.handleQuery();
      },
      /** 查询混凝土拌合站数据列表 */
      getList() {
        productListData(this.queryParams).then(response => {
          this.productList = response.data.records;
          this.total = response.data.total;
          this.productList.forEach((item => {
            // this.allPiecnt 总生产盘数 第一页10条的
            this.allPiecnt += item.pie_cnt   
          }))
        });
        this.getChartData(this.selectt)
      },
      getChartData(val) {
        productGetList(this.selectt || val).then((response) => {
          if (document.getElementById("Chart1")) {
            this.createDayChart(response);
          } else {
            this.$nextTick(() => {
              this.createDayChart(response);
            });
          }
        });
      },
      // 盘数图表
      createDayChart(data) {
        if (null == this.Chart1) {
          this.Chart1 = echarts.init(document.getElementById("Chart1"));
        } else {
          this.Chart1.clear();
        }
  
        if (!!data) {
          var obj = {
            timeArr: ["2112321", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
            valArr: [70200, 107200, 200000, 38400, 309000, 393000, 202000, 79000, 92000, 503000, 334000, 200000],
          }
        }
        let option = this.getLineOption(obj);
        this.Chart1.setOption(option);
      },
      /*** 获取图表配置信息 */
      getLineOption(obj) {
        let option = {
          tooltip: {
            trigger: 'axis',
            axisPointer: { // 坐标轴指示器，坐标轴触发有效
              type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
            }
          },
          grid: {
            top: 50,
            left: '2%',
            right: '2%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: [{
            type: 'category',
            data: obj.timeArr,
          }],
          yAxis: [{
            name: '总产量(kg)',
            type: 'value',
          }],
          series: [{
            type: 'bar',
            barWidth: '45%',
            data: obj.valArr,
          }]
        };
        return option;
      },
      initChart() {
        this.chart = echarts.init(this.$el, 'macarons')
        this.chart.setOption()
      },
    }
  };
  </script>
  
  <style lang="scss">
  #Chart1 {
    width: 1380px;
    height: 360px;
    transform-origin: 0 0;
  }
  </style>
    
    
     
    